<div>
    <table class="sub-menu-group">
        <tr>
            <td>
                <a href="/sjb/designers" class="text-center" style="background-image:url(/themes/{{siteInfo.theme}}/assets/img/btn.png);">
                    <p>设计团队</p>
                </a>
            </td>
            <td>
                <a href="/sjb/order" class="text-center" style="background-image:url(/themes/{{siteInfo.theme}}/assets/img/btn_active.png);">
                    <p>在线订单</p>
                </a>
            </td>
        </tr>
    </table>
</div>
<table class="title">
    <tr>
        <td colspan="3" style="text-align:center">
            <h1 style="margin:0px"><small>ONLINE ORDERS</small></h1>
        </td>
    </tr>
    <tr>
        <td><img src="/themes/{{siteInfo.theme}}/assets/img/line_left.png" alt=""></td>
        <td class="text">
            <h2>在线订单</h2>
        </td>
        <td><img src="/themes/{{siteInfo.theme}}/assets/img/line_right.png" alt=""></td>
    </tr>
</table>
<div class="container">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        请选择地区
                    </h4>
                </div>
                <div class="modal-body">
                    <div id="region-picker" data-toggle="distpicker" data-autoselect="3">
                        <select id="province" data-province="---- 选择省 ----" class="form-control"></select>
                        <select id="city" data-city="---- 选择市 ----" class="form-control"></select>
                        <select id="district" data-district="---- 选择区 ----" class="form-control"></select> {{!-- <input type="text"
                            value="" disabled="disabled"> --}}
                    </div>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    <form id="order-form" class="form-horizontal" role="form" action="\api\order" method="post" enctype="multipart/form-data">
        <div class="form-group">
            <label for="Region" class="col-sm-2 control-label">户型地区</label>
            <div class="col-sm-10">
                <div class="input-group">
                    <input id="Region" type="text" class="form-control" name="Region" data-toggle="modal" data-target="#myModal">
                    <span class="input-group-btn">
						<button class="btn btn-default" type="button" data-toggle="modal" data-target="#myModal">
							选择地区
						</button>
					</span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="AddressDetail" class="col-sm-2 control-label">户型详细地址</label>
            <div class="col-sm-10">
                <textarea class="form-control" rows="3" name="AddressDetail" placeholder="请输入详细地址"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label for="HouseArea" class="col-sm-2 control-label">户型面积</label>
            <div class="col-sm-10">
                <div class="input-group">
                    <input id="HouseArea" name="HouseArea" type="number" class="form-control" min="0" value="100">
                    <span class="input-group-addon">平方米</span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="HouseType" class="col-sm-2 control-label">户型类型</label>
            <div class="col-sm-10">
                <select id="HouseType" name="HouseType" class="form-control">
                    <option>一室一厅</option>
                    <option>二室一厅</option>
                    <option>三室一厅</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="FitClassify" class="col-sm-2 control-label">装修分类</label>
            <div class="col-sm-10">
                <select id="FitClassify" name="FitClassify" class="form-control">
                    <option>毛坯房</option>
                    <option>毛坯房</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="FitStyle" class="col-sm-2 control-label">装修风格</label>
            <div class="col-sm-10">
                <select id="FitStyle" name="FitStyle" class="form-control">
                    <option>简欧</option>
                    <option>中式</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="Budget" class="col-sm-2 control-label">预算</label>
            <div class="col-sm-10" id="yjfy">
                <div class="input-group">
                    <input type="number" id="Budget" name="Budget" class="form-control" min="0" value="0">
                    <span class="input-group-addon">元</span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="HouseImagePath" class="col-sm-2 control-label">户型图上传</label>
            <div class="col-sm-10">
                <input type="file" id="HouseImagePath" name="HouseImagePath">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="IsModeling" name="IsModeling"/>是否建模
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="IsNeedWorkingPlan" name="IsNeedWorkingPlan"/>是否需要施工图
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" name="IsNeedMeasure" id="IsNeedMeasure"/>是否需要量房
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary btn-lg btn-block">确认下单</button>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#region-picker").distpicker();
        $("#myModal").on('hidden.bs.modal', function () {
            $("#Region").val($("#province").val() + $("#city").val() + $("#district").val());
        });

        $('#order-form').bootstrapValidator({
            message: '无效字段',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                Region: {
                    validators: {
                        notEmpty: {
                            message: '请选择户型地区'
                        }
                    }
                },
                HouseImagePath: {
                    validators: {
                        notEmpty: {
                            message: '请上传户型图'
                        }
                    }
                }
            }
        });
    });

</script>